<template>
  <view class="c-cinema-container">
    <view class="cinema-head-box">
      <view class="cinema-name">{{ name }}</view>
      <text class="distance">1234.8km</text>
    </view>
    <view class="cinema-addr">{{ address }}</view>
  </view>
</template>

<script setup>
import { defineProps, ref } from 'vue'
import CTag from '@/components/c-tag'

const props = defineProps({
  name: {
    type: String,
    default: '万达影城万（北京石景山万达广场店）'
  },
  address: {
    type: String,
    default: '新塘镇港口大道北332号金海岸城市广场F4层新塘镇港口大道北332号金海岸城市广场F4层'
  },
  grade: {
    type: Number,
    default: 8
  },
  type: {
    type: String,
    default: '冒险,奇幻,动画,喜剧'
  },
  director: {
    type: String,
    default: '布赖恩·哈尔'
  },
  actor: {
    type: String,
    default: '布赖恩·哈尔/安迪·萨姆伯格/赛琳娜·戈麦斯'
  }
})
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.c-cinema-container {
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: white;
  .cinema-head-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .cinema-name {
      font-size: 15px;
      color: $title-color;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .distance {
      width: 50px;
      text-align: right;
      font-size: 10px;
      color: $text-color;
    }
  }

  .cinema-addr {
    margin-top: 5px;
    font-size: 13px;
    color: $text-color;
  }
}
</style>
